<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理系统·管理员</title>
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/jquery.cookie.min.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- 引入图标 -->
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">   
  <link rel="stylesheet" href="css/nav.css">
  <style>
   *{
  margin: 0;
  padding: 0;
}
nav{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  /* right: 100px; */
  background-color: #46464600;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  transition: all;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-duration: 1s;
}
nav ul li{
  margin: 0 20px;
}

nav:hover{
  background-color: rgba(255, 255, 255, 0.521);
}
    .login-box{
      position: relative;
      /* position: fixed; */
      top: 200px;
      /* background-color: aqua; */
      height: 600px;
      width: 100%;
      z-index: 4;
      display: flex;
      justify-content: center;/*水平居中*/
      align-items: center;/*垂直居中*/
    }
    .login-window{
      width: 400px;
      height: 500px;
      background-color: rgba(255, 255, 255, 0.212);
      /* opacity: 0.4; */
      border-radius: 20px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .login-window:hover{
      opacity: 1;
    }
  </style>

</head>
<body>
  <div id="box">
    <!-- 页面导航 -->
    <!-- <div class="container-fluid" style="width: 100%;"> -->
      <nav>
        <ul class="nav  nav-pills">
          <li class="nav-item">
            <a class="nav-link active" href="index.html">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link " href="usermanage.html">用户管理</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="bookmanage.html">书籍管理</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="borrowmanage.html">借书管理</a>
          </li>
          <!-- <li class="nav-item">
            <a class="nav-link" href="person.html">个人信息</a>
          </li> -->
        </ul>
      </nav>
      <div style="position: absolute;top: 0;overflow: hidden;height: 100%;" id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="img/1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="img/2.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="img/3.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
        <button class="carousel-control-prev" style="background-color: rgba(240, 248, 255, 0);border: 0;" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" style="background-color: rgba(240, 248, 255, 0);border: 0;" type="button" data-target="#carouselExampleIndicators" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </button>
      </div>
      <div class="login-box">
        <div class="login-window">
          <div class="form-group" style="width: 300px">
            <label for="exampleInputEmail1">账户</label>
            <input type="email" id="login-account" class="form-control"  aria-describedby="emailHelp" placeholder="请输入您的账户">
            <br>
            <label for="exampleInputEmail1">密码</label>
            <input type="text" id="login-password" class="form-control"  aria-describedby="emailHelp" placeholder="请输入您的密码">
            <br><br>
            <button type="button" id="login-btn"  class="btn btn-outline-primary btn-block" >登录</button>
          </div>
        </div>
      </div>
    </div>
<script>
  
  $('#login-btn').click(function(){
   var account= $('#login-account').val()
   var password =$('#login-password').val()
   if(!accountCheck(account)) {
     alert('账号输入错误！')
     return
   }
   if(!passwordCheck(password)) {
     alert('密码输入错误！')
     return 
   }
   $.post(
     'LoginController',
     {
      identification:account,
      password:password
     },
     function (data,status) { 
       if(status==='success'){
            
       }
      }
   )
  })
    //用户账号正则检查
    var accountCheck = function(account) {
      account=account.replaceAll(' ','')
      var pattern = /^[A-Za-z0-9]+$/
      return pattern.test(account)
    }
    //用户密码正则检查
    var passwordCheck = function(password){
      password=password.replaceAll(' ','')
      var pattern = /^[A-Za-z0-9]{6,10}$/
    return pattern.test(password) 
    }
</script>
</body>
</html>